<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table
            margin: auto
            border
            :data="officeInfos"
    >
        <el-table-column
                prop="dept.dname"
                label="所属部门"
                width="200">
            <template slot="header" slot-scope="scope">
                <el-select v-model="depts.id" placeholder="请选择科室所属部门" @change="listDept(depts.id)">
                    <el-option
                            v-for="item in depts"
                            :key="item.id"
                            :label="item.dname"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                prop="oname"
                label="科室名称"
                >
        </el-table-column>
        <el-table-column
                prop="ointro"
                label="科室简介"
                >
        </el-table-column>
        <el-table-column
                prop="dsname.state"
                label="科室状态"
                >
        </el-table-column>
        <el-table-column
                prop=""
                label="科室详情"
                >
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-search" circle  @click="getOfficeInfo(scope.row.id)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="科室简介" :visible.sync="dialogFormVisible">
        <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item>
                <template slot="label">
                    科室部门
                </template>
                {{dename}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    科室名称
                </template>
                {{getOffice.oname}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    科室状态
                </template>
                {{dstate}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    科室成就
                </template>
                {{getOffice.oresult}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    学术成就
                </template>
                {{getOffice.oacademic}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    技术优势
                </template>
                {{getOffice.oskill}}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions direction="vertical" :column="1" border>
            <el-descriptions-item>
                <template slot="label">
                    就诊须知
                </template>
                {{getOffice.oknow}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    科室简介
                </template>
                {{getOffice.ointro}}
            </el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
        </div>
    </el-dialog>

</div>
<script>
    $.get("/demo/office/queryOffice",function (backData) {
        haha.officeInfos = backData.data;
    });
    $.get("/demo/office/queryDept",function (backData) {
        haha.depts = backData.data;
    });

    var haha = new Vue({
        el: "#app",
        data: {
            depts:{},
            dename:"",
            dstate:"",
            dialogFormVisible:false,
            officeInfos:[],
            getOffice:{}
        },
        methods: {
            listDept(id){
                $.get("/demo/office/listOffice/"+id,function (backData) {
                    haha.officeInfos = backData.data;
                });
            },
            getOfficeInfo(id){
                $.get("/demo/office/getOffice/"+id,function (backData) {
                    haha.getOffice = backData.data;
                    haha.dstate = backData.data.dsname.state;
                    haha.dename =backData.data.dept.dname;
                });
                haha.dialogFormVisible = true
            }
        }
    })
</script>
</body>
</html>